<!--
 * @Author: xuna
 * @Descripttion: 对账详情
-->
<template>
  <div class="recond-container">
    <el-form ref="formInline" :inline="true" :model="reconcileLot" :label-position="labelPosition">
      <el-row class="recond-date">{{ currentDate }}</el-row>
      <el-row type="flex" justify="space-around" class="recond-search">
        <el-col type="flex">
          <el-form-item label="员工姓名:" prop="name">
            <el-input
              v-model="reconcileLot.name"
              placeholder="请输入员工姓名"
              class="normal-input"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="所属部门:" prop="department">
            <el-input
              v-model="reconcileLot.department"
              placeholder="请输入所属部门"
              class="normal-input"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col class="setting-btn">
          <el-form-item>
            <el-button class="settbtn" @click="resetForm()">重置</el-button>
            <el-button class="settbtn search-btn" type="primary" @click="getTableList()">
              查询
            </el-button>

            <el-button class="settbtn search-btn" @click="exportExcel">
              导出
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <wf-el-table :list="tableData" :total="total" :current="current" @on-page-change="onPageChange">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column
        v-for="item in propData"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
      ></el-table-column>
      <el-table-column fixed="right" width="200px" label="操作">
        <template slot-scope="scope">
          <el-button type="text" class="handle-icon" @click="jumpAssocia(scope.row)">
            <img src="@/assets/img/check.png" alt="" />
            查看关联订单
          </el-button>
        </template>
      </el-table-column>
    </wf-el-table>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import WfElTable from '@/components/Table/index';
  import { downloadBlob } from '@/utils/download';
  import { getBillDetailList, exportBillDetail } from '@/api/reconcilidetail';
  export default {
    components: { WfElTable },
    data() {
      return {
        current: 1,
        total: 0,
        tableData: [],
        propData: [
          {
            prop: 'realName',
            label: '员工姓名',
          },
          {
            prop: 'deptName',
            label: '所属部门',
          },
          {
            prop: 'mobilePhone',
            label: '联系电话',
          },
          {
            prop: 'loginName',
            label: '用户账号',
          },
          {
            prop: 'orderNumber',
            label: '订单总数合计',
          },
          {
            prop: 'orderAmount',
            label: '订单总金额',
          },
          {
            prop: 'payType',
            label: '支付方式',
          },
          {
            prop: 'payAmount',
            label: '支付金额（元）',
          },
        ],
        reconcileLot: {
          name: '',
          department: '',
        },
        labelPosition: 'right',
        billId: null,
        currentDate: '',
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      organId() {
        return this.userInfo.organId;
      },
      isEmpty() {
        return this.tableData.length == 0;
      },
    },
    activated() {
      this.billId = this.$route.query.billId;
      this.currentDate = this.$route.query.currentDate;
      // this.billId = 1; //注意
      // this.currentDate = '2020年3月12日';
      this.getTableList();
    },
    methods: {
      getTableList() {
        this.initList(1, this.reconcileLot.name, this.reconcileLot.department);
      },
      resetForm() {
        this.$refs.formInline.resetFields();
        this.getTableList();
      },
      jumpAssocia(row) {
        console.log(row);
        // 查看关联订单
        this.$router.push({
          path: '/reconcilidetail/checkReconcili',
          query: { billDetail: JSON.stringify(row) },
        });
      },
      onPageChange(data) {
        this.current = data.current;
        this.initList(data.current, this.reconcileLot.name, this.reconcileLot.department);
      },
      initList(current, realName, deptName) {
        let objData = {
          billId: this.billId,
          current,
          deptName,
          orgId: this.organId,
          realName,
          size: 10,
        };
        getBillDetailList(objData).then(res => {
          console.log(res);
          if (res.status == 200) {
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        });
      },
      async exportExcel() {
        let objData = {
          billId: this.billId,
          current: this.current,
          deptName: this.reconcileLot.department,
          orgId: this.organId,
          realName: this.reconcileLot.name,
          size: 10,
        };
        const res = await exportBillDetail(objData);
        res && downloadBlob(res.data, res.filename || '对账详情名单.xls');
        this.$message.success('导出成功！');
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  .recond-container {
    @include wh(100%, 100%);
    overflow: hidden;
    padding-top: 0 !important;
    .recond-date {
      @include wh(100%, 47px);
      padding: 0 14px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      @include font(14px, #4c71cf, 800);
      margin-bottom: 17px;
      background-color: #fff;
      border-radius: 7px;
    }
    .recond-search {
      height: 65px;
      background-color: #fff;
      border-radius: 7px;
      margin-bottom: 16px;
      padding-left: 34px;
      box-sizing: border-box;
      /deep/.el-col {
        display: flex;
        align-items: center;
      }
      /deep/.el-form-item__label {
        @include font(14px, #7f848b, 400);
      }
      /deep/.el-form-item {
        margin-bottom: 0;
      }
    }
    /deep/.el-form--inline {
      border-radius: 7px;
      box-sizing: border-box;
    }
    /deep/.el-input {
      background: rgba(255, 255, 255, 1);
      border-radius: 7px;
      border: 1px solid rgba(244, 240, 243, 1);
    }
    /deep/.el-table {
      border-radius: 7px;
    }
    .setting-btn {
      display: flex;
      justify-content: flex-end;
    }
    .settbtn {
      @include wh(94px, 36px);
      border-radius: 7px;
      background: #fffeff;
      border: 1px solid #e8e4e8;
      @include font(14px, #353739, 400);
    }
    .search-btn {
      background: #3771e9;
      color: #fff;
    }
    .normal-input {
      @include wh(210px, 36px);
    }
    .handle-icon {
      @include font(14px, #353739, 400);
      margin-right: 15px;
      img {
        @include wh(23px, 23px);
        vertical-align: middle;
      }
    }
  }
  .search-empty {
    background-color: #fff;
  }
  // /deep/.wf-table-wrapper {
  //   height: calc(100vh - 182px) !important;
  // }
</style>
